import React, { useEffect, useState } from 'react';
import '../styles/styles.css';
import { useChat } from '../hooks/useChat';
import { ChatSider } from '../components/ChatSider';
import { ChatList } from '../components/ChatList';
import { ChatSender } from '../components/ChatSender';
import { DEFAULT_CONVERSATIONS_ITEMS } from '../utils/constants';
import type { ConversationItem } from '../types';

const Chat: React.FC = () => {
  const { loading, messages, setMessages, onSubmit, onCancel } = useChat();

  // ==================== State ====================
  const [messageHistory, setMessageHistory] = useState<Record<string, any>>({});
  const [conversations, setConversations] = useState<ConversationItem[]>(DEFAULT_CONVERSATIONS_ITEMS);
  const [curConversation, setCurConversation] = useState(DEFAULT_CONVERSATIONS_ITEMS[0].key);

  // ==================== Effects ====================
  useEffect(() => {
    // history mock
    if (messages?.length) {
      setMessageHistory((prev) => ({
        ...prev,
        [curConversation]: messages,
      }));
    }
  }, [messages, curConversation]);

  // ==================== Render ====================
  return (
    <div className="app-container">
      {/* 视频背景 */}
      <div className="video-background">
        <video className="background-video" autoPlay loop muted playsInline>
          <source src="/vedio/夏日的风.mp4" type="video/mp4" />
        </video>
        <div className="overlay"></div>
      </div>

      <div className="layout">
        <ChatSider
          conversations={conversations}
          curConversation={curConversation}
          onConversationsChange={setConversations}
          onCurConversationChange={setCurConversation}
          onMessagesChange={setMessages}
          messageHistory={messageHistory}
          loading={loading}
        />

        <div className="chat">
          <ChatList messages={messages} onSubmit={onSubmit} />
          <ChatSender loading={loading} onSubmit={onSubmit} onCancel={onCancel} />
        </div>
      </div>
    </div>
  );
};

export default Chat;
